<template>
	<view class="vote">
		<view class="headbox">
			<image class="avatar" :src="imgUrl" mode="aspectFill"></image>
			<view class="right">
				<view class="username">{{dataInfo.author}}</view>
				<view class="datas">
					<!-- <view class="">
						<view>1823</view>
						<view class="">
							<text class="iconfont icon-yaoqinghaoyou1"></text>
							<text>编号</text>
						</view>
					</view> -->
					<view class="">
						<text>排行：</text>
						<text>{{dataInfo.rank}}</text>
					</view>
					<view class="">
						<text>总票数：</text>
						<text>{{dataInfo.total_goods_value}}</text>
					</view>
				</view>
			</view>
		</view>
		<!-- <uni-notice-bar scrollable single text="[单行] 这是 NoticeBar 通告栏，这是 NoticeBar 通告栏，这是 NoticeBar 通告栏"></uni-notice-bar> -->
		<!-- <swiper class="swipers" :current="currentIndex" @change="onChange" :style="{height: imageH + 40 + 'rpx'}">
			<swiper-item v-for="(img,index) in imgUrls" :key="index">
				<image :src="img" mode="widthFix"></image>
			</swiper-item>
		</swiper> -->
		<view class="content">
			<view class="title">{{dataInfo.title}}</view>
			<view class="desc">
				<text>简介：</text>
				<text>{{dataInfo.synopsis}}</text>
			</view>
			<rich-text :nodes="dataInfo.content"></rich-text>
		</view>
		<!-- <view class="rankbox">
			<view class="title">
				<text class="icon">▍</text>
				<text>支持榜</text>
			</view>
			<view class="list flex flexC">
				<view v-for="(item,index) in rankList" :key="index" class="item">
					<image class="crown" :src="`/static/images/vote/crown_${index+1}.png`" mode="widthFix"></image>
					<image class="cover" :src="item.avatar" mode="aspectFill"></image>
					<view class="nick">{{item.nickname}}</view>
				</view>
			</view>
		</view> -->
		<view v-if="praiseLog.length" class="rankbox">
			<view class="title">
				<text class="icon">▍</text>
				<text>打赏列表</text>
			</view>
			<scroll-view scroll-y class="listbox">
				<view v-for="(item,index) in praiseLog" :key="index" class="item">
					<image class="avatar" :src="item.avatar" mode="aspectFill"></image>
					<view class="flex1">
						<view class="title">
							<text class="nick">{{item.nickname || '匿名'}}</text>，赠送 <text>{{item.title}} x {{item.num}}</text>
						</view>
						<view class="times">{{item.create_time}}</view>
					</view>
				</view>
			</scroll-view>
			<!-- <view v-if="!finished" class="more">
				<text @click="getPraiseLog">查看更多</text>
			</view> -->
		</view>
		
		<rich-text :nodes="content"></rich-text>
		<!-- <prize></prize> -->
		<view class="fixed">
			<navigator url="/pages/vote/index" class="left" hover-class="none">
				<image src="/static/images/1-001.png" mode="aspectFill"></image>
				<view>首页</view>
			</navigator>
			<view class="center">
				<image @click="open" src="/static/images/vote/dianzanrowin.gif" mode="aspectFill"></image>
			</view>
			<view @click="getPraise" class="right">
				<image src="/static/images/vote/zan.png" mode="aspectFill"></image>
				<view>投票</view>
			</view>
		</view>
		<view @click="getPoster" class="share">
			<image src="/static/images/vote/wechat-moments.png" mode="aspectFill"></image>
			<view>分享朋友圈</view>
		</view>
		<!-- 海报展示 -->
		<view class='poster-pop' v-if="posterPopup">
			<image src='/static/images/poster-close.png' mode="widthFix" class='close' @click="posterPopup = false"></image>
			<image :src='posterImg' mode="widthFix"></image>
			<!-- #ifdef H5 -->
			<view class="keep">{{$t(`长按图片可以保存到手机`)}}</view>
			<!-- #endif -->
		</view>
		<uni-popup ref="popup" type="center">
			<view class="popup">
				<view class="title">礼物列表</view>
				<view class="list">
					<view 
						v-for="(item,index) in productList" 
						@click="onSelectProduct(item)"
						class="item" :key="item.id">
						<image :class="params.id == item.id ? 'active' : ''" :src="item.image" mode="aspectFill"></image>
						<view class="name">{{item.store_name}}</view>
						<view>{{item.goods_value}}票</view>
						<view class="price">￥<text>{{item.price}}</text></view>
					</view>
				</view>
				<view class="carnum-box">
					<view class="label">数量：</view>
					<view class='carnum acea-row row-center-wrapper'>
						<view class="reduce" :class="cart_num <= 1 ? 'on' : ''"
							@click.stop='subCart'>-</view>
						<view class="num">
							<input type="number" v-model="cart_num" />
						</view>
						<view class="plus" @click.stop='addCart'>+</view>
					</view>
				</view>
				<view class="btns">
					<view @click="close" class="cancel">取消</view>
					<view @click="goCat" class="confirm">送礼物</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import prize from './components/prize';
	import {getUserInfo,getPraiseLog,getPraise,getCategoryList,getShare} from '@/api/vote';
	import {getProductslist,postCartAdd} from '@/api/store';
	import {
		orderConfirm,
		orderCreate,
		orderPay
	} from '@/api/order.js';
	import {
		imageBase64
	} from "@/api/public";
	export default {
		components: {
			prize
		},
		data() {
			return {
				currentIndex: 0,
				imageH: '100vh',
				dataInfo: '',
				imgUrl: '',
				productList: [],
				params: {
					id: '',
					virtual_type: ''
				},
				params2: {
					page: 1,
					limit: 5
				} ,
				praiseLog: [],
				rankList: [],
				finished: false,
				cid: '',
				goods_value: '',
				posterPopup: false,
				posterImg: '',
				content: '',
				cart_num: 1
			};
		},
		onLoad(option) {
			this.cid = option.id;
			this.getUserInfo();
			this.getPraiseLog();
			this.getProducts();
		},
		methods: {
			subCart() {
				if (this.cart_num < 1) return;
				if (this.cart_num <= 1) {
					this.cart_num = 1;
				} else {
					this.cart_num = Number(this.cart_num) - 1;
				}
			},
			addCart() {
				this.cart_num = Number(this.cart_num) + 1
			},
			close() {
				this.$refs.popup.close();
			},
			open(){
				this.$refs.popup.open('center')
			},
			
			onSelectProduct(item) {
				this.params.id = item.id;
				this.goods_value = item.goods_value;
				this.params.virtual_type = item.virtual_type;
			},
			/**
			 * 生成海报
			 */
			getPoster() {
				getShare({id: this.cid}).then(res => {
					this.posterPopup = true;
					this.posterImg = res.data.url;
				})
			},
			getCategoryList() {
				getCategoryList().then(res => {
					if(res.data.length) {
						let dataInfo = res.data[0];
						this.content = dataInfo.content;
						this.ShareInfo(dataInfo);
						uni.setNavigationBarTitle({
							title: dataInfo.title
						});
					}
				})
			},
			ShareInfo(data) {
				let href = location.href;
				if (this.$wechat.isWeixin()) {
					let configAppMessage = {
						desc: this.$t(`我是${this.dataInfo.author},我正在参加${data.title}请为我加油`),
						title: this.$t(`${data.title}`),
						link: href,
						imgUrl: this.imgUrl
					};
					this.$wechat
						.wechatEvevt(
							[
								"updateAppMessageShareData",
								"updateTimelineShareData",
								"onMenuShareAppMessage",
								"onMenuShareTimeline",
							],
							configAppMessage
						)
						.then((res) => {})
						.catch((err) => {});
				}
			},
			getPraise() {
				getPraise({id: this.cid,num: 1}).then(res => {
					this.params2.page = 1;
					this.getPraiseLog()
					return this.$util.Tips({
						title: res.msg,
						icon: 'success'
					});
				}).catch(err => {
					return this.$util.Tips({
						title: err
					})
				})
			},
			getPraiseLog() {
				if(this.finished && this.params2.page != 1) return;
				let params = {
					cid: this.cid,
					...this.params2
				}
				getPraiseLog(params).then(res => {
					this.praiseLog = this.params2.page > 1 ? [...this.praiseLog, ...res.data.list] : res.data.list;
					if(this.params2.page == 1) {
						this.rankList = res.data.rank && res.data.rank.slice(0,3);
					}
					this.params2.page += 1;
					this.finished = res.data.list.length < this.params2.limit;
				})
			},
			/*
			 * 加入购物车
			 */
			goCat(news) {
				let q = {
					productId: this.params.id,
					cartNum: this.cart_num,
					new: 1,
					uniqueId: "",
					virtual_type: this.params.virtual_type,
				};
				postCartAdd(q)
					.then(res =>{
						this.close();
						this.getConfirm(res.data.cartId)
					})
					.catch((err) => {
						return this.$util.Tips({
							title: err
						});
					});
			},
			// 获取订单信息
			getConfirm(cartId) {
				uni.showLoading({
					title: this.$t(`正在加载中`),
					mask: true
				});
				orderConfirm(cartId, 1, 0, 1).then(res => {
					this.payment(res.data.orderKey)
				}).catch(err => {
					uni.hideLoading()
					return this.$util.Tips({
						title: err
					});
				});
			},
			// 创建订单
			payment(orderKey) {
				let params = {
					article_id: this.cid,
					goods_value: this.goods_value
				}
				orderCreate(orderKey,params).then(res => {
					this.goPay(res.data.result.orderId)
				}).catch(err => {
					uni.hideLoading();
					return this.$util.Tips({
						title: err
					});
				});
			},
			// 支付
			goPay(orderId) {
				let that = this;
				uni.showLoading({
					title: that.$t(`支付中`)
				});
				
				orderPay({
					uni: orderId,
					paytype: 'weixin',
					type: 0,
					quitUrl: ''
				}).then(res => {
					let status = res.data.status,
						orderId = res.data.result.order_id,
						jsConfig = res.data.result.jsConfig
					switch (status) {
						case 'ORDER_EXIST':
						case 'EXTEND_ORDER':
							uni.hideLoading();
							return that.$util.Tips({
								title: res.msg
							});
						case 'ALLINPAY_PAY':
							uni.hideLoading();
							// #ifdef MP
							wx.openEmbeddedMiniProgram({
								appId: 'wxef277996acc166c3',
								extraData: {
									cusid: jsConfig.cusid,
									appid: jsConfig.appid,
									version: jsConfig.version,
									trxamt: jsConfig.trxamt,
									reqsn: jsConfig.reqsn,
									notify_url: jsConfig.notify_url,
									body: jsConfig.body,
									remark: jsConfig.remark,
									validtime: jsConfig.validtime,
									randomstr: jsConfig.randomstr,
									paytype: jsConfig.paytype,
									sign: jsConfig.sign,
									signtype: jsConfig.signtype
								}
							})
							// #endif
							break;
						case 'PAY_ERROR':
							uni.hideLoading();
							return that.$util.Tips({
								title: res.msg
							});
							break;
						case 'SUCCESS':
							uni.hideLoading();
							that.$util.Tips({
								title: that.$t(`礼物已送出`),
								icon: 'success'
							})
							break;
						case 'WECHAT_PAY':
							// #ifdef MP
							/* that.toPay = true; */
							let mp_pay_name = ''
							if (uni.requestOrderPayment) {
								mp_pay_name = 'requestOrderPayment'
							} else {
								mp_pay_name = 'requestPayment'
							}
							uni[mp_pay_name]({
								timeStamp: jsConfig.timestamp,
								nonceStr: jsConfig.nonceStr,
								package: jsConfig.package,
								signType: jsConfig.signType,
								paySign: jsConfig.paySign,
								success: function(res) {
									uni.hideLoading();
									if (that.BargainId || that.combinationId || that.pinkId ||
										that
										.seckillId || that.discountId)
										return that.$util.Tips({
											title: that.$t(`礼物已送出`),
											icon: 'success'
										});
									return that.$util.Tips({
										title: that.$t(`礼物已送出`),
										icon: 'success'
									});
								},
								fail: function(e) {
									uni.hideLoading();
									return that.$util.Tips({
										title: that.$t(`取消支付`)
									});
								},
								complete: function(e) {
									uni.hideLoading();
									//关闭当前页面跳转至订单状态
									if (res.errMsg == 'requestPayment:cancel' || e.errMsg ==
										'requestOrderPayment:cancel') return that.$util
										.Tips({
											title: that.$t(`取消支付`)
										});
								},
							})
							// #endif
							// #ifdef H5
							this.$wechat.pay(res.data.result.jsConfig).then(res => {
								return that.$util.Tips({
									title: that.$t(`礼物已送出`),
									icon: 'success'
								});
							}).catch(res => {
								if (!this.$wechat.isWeixin()) {
									return that.$util
									.Tips({
										title: that.$t(`支付失败`)
									});
								}
								if (res.errMsg == 'chooseWXPay:cancel') return that.$util.Tips({
									title: that.$t(`取消支付`)
								});
							})
							// #endif
							break;
						case 'PAY_DEFICIENCY':
							uni.hideLoading();
							//余额不足
							return that.$util.Tips({
								title: res.msg
							});
							break;
			
						case "WECHAT_H5_PAY":
							uni.hideLoading();
							that.$util.Tips({
								title: that.$t(`等待支付中`)
							});
							setTimeout(() => {
								location.href = res.data.result.jsConfig.h5_url;
							}, 1500);
							break;
			
						case 'ALIPAY_PAY':
							//#ifdef H5
							uni.hideLoading();
							that.$util.Tips({
								title: that.$t(`等待支付中`)
							});
							that.formContent = res.data.result.jsConfig;
							setTimeout(() => {
								document.getElementById('alipaysubmit').submit();
							}, 1500);
							//#endif
							// #ifdef MP
							uni.navigateTo({
								url: `/pages/users/alipay_invoke/index?id=${orderId}&link=${jsConfig.qrCode}`
							});
							// #endif
							break;
					}
			
				}).catch(err => {
					uni.hideLoading();
					return that.$util.Tips({
						title: err
					})
				})
			},
			getProducts() {
				getProductslist().then(res => {
					this.productList = res.data;
					if(this.productList.length) {
						this.params.id = this.productList[0].id;
						this.goods_value = this.productList[0].goods_value;
						this.params.virtual_type = this.productList[0].virtual_type;
					}
				})
			},
			getUserInfo() {
				getUserInfo(this.cid).then(res => {
					this.dataInfo = res.data;
					if(this.dataInfo.image_input.length) {
						this.imgUrl = res.data.image_input[0];
						this.getCategoryList();
					}
				})
			},
			getImage(index) {
				uni.getImageInfo({
					src: this.imgUrls[this.currentIndex],
					success:(res) =>{
						this.imageH = res.height * 750 / res.width;
					}
				})
			},
			onChange(ev) {
				this.currentIndex = ev.detail.current;
				this.getImage();
			}
		}
	}
</script>

<style lang="scss" scoped>
.vote {
	padding: 20rpx 20rpx 160rpx;
	font-size: 28rpx;
	.poster-pop {
		width: 100%;
		height: 100%;
		position: fixed;
		left: 0;
		top: 0;
		z-index: 300;
		background-color: rgba(0,0,0,.85);
		display: flex;
		align-content: center;
		align-items: center;
		justify-content: center;
		flex-direction: column;
	}
	
	.poster-pop image {
		width: 600rpx;
		height: 1000rpx;
		display: block;
	}
	
	.poster-pop .close {
		width: 56rpx;
		height: 84rpx;
		display: block;
	}
	
	.poster-pop .save-poster {
		background-color: #df2d0a;
		font-size: ：22rpx;
		color: #fff;
		text-align: center;
		height: 76rpx;
		line-height: 76rpx;
		width: 100%;
	}
	
	.poster-pop .keep {
		color: #fff;
		text-align: center;
		font-size: 25rpx;
		margin-top: 10rpx;
	}
	.share {
		background-color: #fff;
		border-radius: 10rpx;
		padding: 20rpx;
		font-size: 24rpx;
		text-align: center;
		position: fixed;
		top: 50%;
		right: 10rpx;
		box-shadow: 0 0 20rpx rgba(0,0,0,.08);
		image {
			width: 100rpx;
			height: 100rpx;
		}
	}
	.popup {
		background-color: #fff;
		width: 90vw;
		max-width: 80vh;
		border-radius: 24rpx;
		padding: 30rpx 24rpx 50rpx;
		.title {
			text-align: center;
		}
		.carnum-box {
			border-top: 2rpx solid #eee;
			padding: 30rpx 0;
			display: flex;
			align-items: center;
			justify-content: space-between;
		}
		.carnum {
			height: 47rpx;
		}
		
		.carnum view {
			border: 1rpx solid #a4a4a4;
			width: 66rpx;
			text-align: center;
			height: 100%;
			line-height: 40rpx;
			font-size: 28rpx;
			color: #a4a4a4;
		}
		
		.carnum .reduce {
			border-right: 0;
			border-radius: 3rpx 0 0 3rpx;
		}
		
		.carnum .reduce.on {
			border-color: #e3e3e3;
			color: #dedede;
		}
		
		.carnum .plus {
			border-left: 0;
			border-radius: 0 3rpx 3rpx 0;
		}
		
		.carnum .plus.on {
			border-color: #e3e3e3;
			color: #dedede;
		}
		
		.carnum .num {
			color: #282828;
		}
		
		.btns {
			display: flex;
			align-items: center;
			justify-content: center;
			margin-top: 40rpx;
			>view {
				width: 200rpx;
				height: 66rpx;
				line-height: 66rpx;
				border-radius: 12rpx;
				text-align: center;
				&.cancel {
					border: 2rpx solid #c5c5c5;
					box-sizing: border-box;
				}
				&.confirm {
					background-color: #e57511;
					color: #fff;
					margin-left: 40rpx;
				}
			}
		}
		.list {
			display: flex;
			align-items: center;
			flex-wrap: wrap;
			max-height: 55vh;
			overflow-y: auto;
			.item {
				width: 33.33%;
				text-align: center;
				margin-bottom: 24rpx;
				
				image {
					width: 100rpx;height: 100rpx;
					&.active {
						border: 4rpx solid #e57511;
						border-radius: 12rpx;
					}
				}
				.price {
					color: #e57511;
					font-size: 20rpx;
					text {
						font-size: 30rpx;
						font-weight: 600;
					}
				}
			}
		}
	}
	.fixed {
		position: fixed;
		bottom: -2rpx;
		left: 0;
		width: 100vw;
		height: 120rpx;
		background-color: #fff;
		display: flex;
		align-items: center;
		justify-content: space-between;
		z-index: 99;
		text-align: center;
		box-shadow: 0 -10rpx 10rpx rgba(0,0,0,.06);
		.left {
			padding: 40rpx;
			image {
				width: 46rpx;
				height: 46rpx;
			}
		}
		.center {
			image {
				margin-top: -70rpx;
				position: relative;
				width: 160rpx;
				height: 160rpx;
				border-radius: 50%;
			}
		}
		.right {
			padding: 40rpx;
			image {
				width: 40rpx;
				height: 50rpx;
			}
		}
	}
	.content {
		padding: 40rpx 24rpx;
		background-color: #fff;
		border-radius: 24rpx;
		margin-top: 20rpx;
		font-size: 32rpx;
		.title {
			text-align: center;
			font-size: 40rpx;
		}
		.desc {
			background-color: #f1f8f9;
			color: #51999d;
			font-size: 20rpx;
			display: flex;
			align-items: flex-start;
			border-radius: 12rpx;
			padding: 18rpx 24rpx;
			margin-bottom: 30rpx;
		}
	}
	.rankbox {
		background-color: #fff;
		border-radius: 24rpx;
		padding: 24rpx;
		margin-top: 20rpx;
		.title {
			text {
				color: #df2d0a;
				margin-left: 10rpx;
			}
			.nick {
				color: #51999d;
			}
		}
		.cont {
			font-size: 30rpx;
			.sub {
				text-align: center;
				font-size: 36rpx;
				padding-bottom: 30rpx;
				text {
					background-color: #e57511;
					color: #fff;
					border-radius: 80rpx;
					padding: 10rpx 40rpx;
				}
			}
			.tit {color: #ae1313;font-weight: 600;font-size: 40rpx;padding: 32rpx;text-align: center;}
			.txt {
				margin: 30rpx 0 80rpx;
				background-color: #fbf8eb;
				padding: 40rpx;
				line-height: 50rpx;
				font-size: 32rpx;
				text-align: justify;
				>view {
					margin-bottom: 50rpx;
				}
			}
		}
		.more {
			text-align: center;
			padding: 20rpx;
			text {
				background-color: #e5e5e5;
				border-radius: 12rpx;
				padding: 12rpx 30rpx;
				color: #666;
			}
		}
		.listbox {
			.item {
				display: flex;
				align-items: center;
				margin-bottom: 28rpx;
				padding-bottom: 20rpx;
				border-bottom: 2rpx solid #e5e5e5;
				.avatar {
					width: 80rpx;
					height: 80rpx;
					border-radius: 50%;
					margin-right: 12rpx;
					background-color: #e5e5e5;
				}
				.flex1 {
					flex: 1;
					.title {font-size: 28rpx;color: #333;font-weight: 400; margin-bottom: 14rpx;}
					.times {color: #999;font-size: 24rpx;}
				}
			}
		}
		.list {
			display: flex;
			align-items: center;
			justify-content: space-around;
			position: relative;
			padding-top: 200rpx;
			.item {
				position: relative;
				.crown {
					width: 140rpx;height: 140rpx;position: absolute;
					top: -76rpx;left: 34rpx;z-index: 9;
				}
				.cover {
					width: 120rpx;height: 120rpx;border-radius: 50%;
					background-color: #e5e5e5;
				}
				&:first-child {
					position: absolute;
					top: 10rpx;
					left: 50%;
					transform: translate(-50%);
				}
				.nick {text-align: center;}
			}
		}
	}
	.swipers {
		height: 100vh;
		image {
			width: 100%;
			height: 100%;
		}
	}
	.title {
		font-weight: 600;
		font-size: 32rpx;
		margin-bottom: 50rpx;
		.icon {
			margin-right: 10rpx;
			font-size: 20rpx;
			color: #e57511;
		}
	}
	.headbox {
		display: flex;
		align-items: center;
		background-color: #fff;
		border-radius: 12rpx;
		padding: 32rpx;
		box-shadow: 0 0 10rpx rgba(0,0,0,.05);
		.avatar { width: 120rpx;height: 120rpx;border-radius: 50%;background-color: #e5e5e5;}
		.right {
			flex: 1;
			margin-left: 28rpx;
			.username {font-weight: 600;font-size: 32rpx}
			.datas {
				display: flex;
				align-items: center;
				color: #51999d;
				margin-top: 20rpx;
				>view {
					width: 200rpx;
				}
			}
		}
	}
}
</style>
